// 堆叠图
export const stacked = function(that,myChartId,title,entryData,midData,endData){
    let main = document.getElementById(myChartId);
    let myChart = that.$echarts.init(main);//创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。
    let options = {
            title: {//标题组件，包含主标题和副标题
                text: title//主标题文本，支持使用 \n 换行。
            },
            tooltip: {//提示框组件。
                trigger: 'axis',//触发类型。'axis' :坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                extraCssText: "height:100px",
            },
            legend: {//图例组件。
                top:'10%',
                data: ['入学', '期中', '期末']//图例的数据数组。
            },
            grid: {//直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
                top:'20%',
                left: '5%',//grid 组件离容器左侧的距离。
                right: '5%',//grid 组件离容器右侧的距离。
                bottom: '5%',//grid 组件离容器下侧的距离。
                containLabel: true//grid 区域是否包含坐标轴的刻度标签。
            },
            toolbox: {//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
                feature: {//各工具配置项。
                    saveAsImage: {}//保存为图片。
                }
            },
            xAxis: {//直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
                type: 'category',//坐标轴类型。 'category':类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
                boundaryGap: false,//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
                data: ['语文', '数学', '英语', '理综', '文综']//类目数据，在类目轴（type: 'category'）中有效。
            },
            yAxis: {//直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
                type: 'value',//坐标轴类型。 'value' 数值轴，适用于连续数据。
                min:0,
                max:150
            },
            series: [//系列
                {
                    name: '入学成绩',//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                    type: 'line',//折线/面积图
                    // stack: 'Total',//数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置。
                    data: entryData//数据
                },
                {
                    name: '期中成绩',//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                    type: 'line',//折线/面积图
                    // stack: 'Total',//数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置。
                    data: midData//数据
                },
                {
                    name: '期末成绩',//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                    type: 'line',//折线/面积图
                    // stack: 'Total',//数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置。
                    data:endData//数据
                },
            ]
        };
        myChart.setOption(options);
        window.onresize = function () {
            myChart.resize();
    };
}
// 折线图
export const basisLine = function(that,myChartId,title,score){
    let main = document.getElementById(myChartId);
    let myChart = that.$echarts.init(main);//创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。
    let option = {
        title: {
            text: title,
        },
        grid: {
            top: "20%",
            left: "5%",
            right: "5%",
            bottom: "5%",
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: ["入学","期中","期末"]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: score,
                type: 'line'
            }
        ]
    };
    myChart.setOption(option);
    window.onresize = function () {
        myChart.resize();
    };
}